﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/chart/chart.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
	//single date
	$('#daterange').daterangepicker({
		startDate: moment().add('month', -1),//表示开始时间为今天的基础上减1月
		autoApply: true,
		locale: {
			format:'YYYY/MM/DD',
		},
		ranges: {
            '本周': [moment().startOf('week'), moment().endOf('week')],
            '本月': [moment().startOf('month'), moment().endOf('month')]
        },
        startDate: moment().startOf('month'),
        endDate: moment().endOf('month')
	});

	function drawChart(){
		var daterange = $("#daterange").val();
		var sales = $('#sales').val();
		var url = "{:url('Sales/analysisJson')}?sales=" + sales + "&daterange=" + daterange;
		$.ajax({
		    url: url,
		    method: "GET",
		    dataType : 'JSON',
		    success: function(data) {
		    	//将json解析成js对象
		      	// var data = JSON.parse(data);	

		      	$('#visitor_count').text(data.visitorCount);
		      	$('#visitorChainRatio').text(data.visitorChainRatio);
		      	$('#invite_count').text(data.inviteCount);
		      	$('#inviteChainRatio').text(data.inviteChainRatio);
		      	$('#order_count').text(data.OrderCount);
		      	$('#orderChainRatio').text(data.orderChainRatio);
		      	$('#deliver_count').text(data.deliverCount);
		      	$('#deliverChainRatio').text(data.deliverChainRatio);

		      	// -------------------------------
		      	//客流趋势线图

		      	var line_data = data.lineData;

		      	//日期标签
	      		var label = [];
	      		//总客流
		      	var thisVisitorData = [];
		      	var lastVisitorData = [];
		      	//首次客流
		      	var thisOrderData = [];
		      	var lastOrderData = [];
		      	//再次客流
		      	var thisDeliverData = [];
		      	var lastDeliverData = [];

		     	for(var i in line_data){
			        label.push(line_data[i].datetag);

			        thisVisitorData.push(line_data[i].thisVisitorData);
			        lastVisitorData.push(line_data[i].lastVisitorData);

			        thisOrderData.push(line_data[i].thisOrderData);
			        lastOrderData.push(line_data[i].lastOrderData);

			        thisDeliverData.push(line_data[i].thisDeliverData);
			        lastDeliverData.push(line_data[i].lastDeliverData);
			    }

			    // -------------------------------
		      	//客流数据

			    var visitorData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisVisitorData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastVisitorData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            aspectRatio: 4,
			            maintainAspectRatio:false
			        }
			    };

			    $('#visitor_canvas').remove(); // this is my <canvas> element
				$('#visitor_chart').append('<canvas id="visitor_canvas"></canvas>');

			    var a = document.getElementById("visitor_canvas").getContext("2d");
			    var visitor_chart = new Chart(a,visitorData_conifg);


			    // -------------------------------
		      	//订单数据

			    var orderData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisOrderData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastOrderData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            maintainAspectRatio:false
			        }
			    };

			    $('#order_canvas').remove(); // this is my <canvas> element
				$('#order_chart').append('<canvas id="order_canvas" height="100"></canvas>');

			    var a = document.getElementById("order_canvas").getContext("2d");
			    var order_chart = new Chart(a,orderData_conifg);

			    // -------------------------------
		      	//交车数据thisDeliverData

			    var deliverData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisDeliverData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastDeliverData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            maintainAspectRatio:false
			        }
			    };

			    $('#deliver_canvas').remove(); // this is my <canvas> element
				$('#deliver_chart').append('<canvas id="deliver_canvas"></canvas>');

			    var a = document.getElementById("deliver_canvas").getContext("2d");
			    var deliver_chart = new Chart(a,deliverData_conifg);

			    // -------------------------------
		      	//接待时长占比

		      	var lengthRatio_data = data.lengthRatio;

		        var lengthRatio_config = {
			        type: "pie",
			        data: {
			            labels: lengthRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
			                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: lengthRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#lengthRatio_canvas').remove(); // this is my <canvas> element
				$('#lengthRatio_chart').append('<canvas id="lengthRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("lengthRatio_canvas").getContext("2d");
			    var lengthRatioChart = new Chart(a, lengthRatio_config);

			    // -------------------------------
		      	//关注车型占比

		      	var vehicleRatio_data = data.vehicleRatio;

		        var vehicleRatio_config = {
			        type: "pie",
			        data: {
			            labels: vehicleRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
			                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: vehicleRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#vehicleRatio_canvas').remove(); // this is my <canvas> element
				$('#vehicleRatio_chart').append('<canvas id="vehicleRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("vehicleRatio_canvas").getContext("2d");
			    var vehicleRatioChart = new Chart(a, vehicleRatio_config);

			    // -------------------------------
		      	//联系方式留存占比

		      	var contactRatio_data = data.contactRatio;

		        var contactRatio_config = {
			        type: "pie",
			        data: {
			            labels: contactRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: contactRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#contactRatio_canvas').remove(); // this is my <canvas> element
				$('#contactRatio_chart').append('<canvas id="contactRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("contactRatio_canvas").getContext("2d");
			    var contactRatioChart = new Chart(a, contactRatio_config);

			    // -------------------------------
		      	//首再次客户占比

		      	var typeRatio_data = data.typeRatio;

		        var typeRatio_config = {
			        type: "pie",
			        data: {
			            labels: typeRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: typeRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#typeRatio_canvas').remove(); // this is my <canvas> element
				$('#typeRatio_chart').append('<canvas id="typeRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("typeRatio_canvas").getContext("2d");
			    var typeRatio_chart = new Chart(a, typeRatio_config);

			    // -------------------------------
		      	//客户性别占比

		      	var sexRatio_data = data.sexRatio;

		        var sexRatio_config = {
			        type: "pie",
			        data: {
			            labels: sexRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: sexRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#sexRatio_canvas').remove(); // this is my <canvas> element
				$('#sexRatio_chart').append('<canvas id="sexRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("sexRatio_canvas").getContext("2d");
			    var sexRatioChart = new Chart(a, sexRatio_config);

			    // -------------------------------
		      	//首次到店成交率占比

		      	var firstToOrderRatio_data = data.firstToOrderRatio;

		        var firstToOrderRatio_config = {
			        type: "pie",
			        data: {
			            labels: firstToOrderRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: firstToOrderRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#firstToOrderRatio_canvas').remove(); // this is my <canvas> element
				$('#firstToOrderRatio_chart').append('<canvas id="firstToOrderRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("firstToOrderRatio_canvas").getContext("2d");
			    var firstToOrderRatioChart = new Chart(a, firstToOrderRatio_config);

			    // -------------------------------
		      	//再次到店成交率成交占比

		      	var lastToOrderRatio_data = data.lastToOrderRatio;

		        var lastToOrderRatio_config = {
			        type: "pie",
			        data: {
			            labels: lastToOrderRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: lastToOrderRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#lastToOrderRatio_canvas').remove(); // this is my <canvas> element
				$('#lastToOrderRatio_chart').append('<canvas id="lastToOrderRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("lastToOrderRatio_canvas").getContext("2d");
			    var lastToOrderRatioChart = new Chart(a, lastToOrderRatio_config);

			    // -------------------------------
		      	//承保率

		      	var insurance_data = data.insurance;

		        var insurance_config = {
			        type: "pie",
			        data: {
			            labels: insurance_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: insurance_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#insurance_canvas').remove(); // this is my <canvas> element
				$('#insurance_chart').append('<canvas id="insurance_canvas" height="350"></canvas>');

			    var a = document.getElementById("insurance_canvas").getContext("2d");
			    var insuranceChart = new Chart(a, insurance_config);
			},
		    error: function(data) {
		      console.log(data);
		    }
		});
	}

	$(document).ready(function(){
		drawChart();
	})
</script>
{/block}

//页面名称
{block name="PageName"}
销售人员效能分析
{/block}

//主页面
{block name="main"}
<div class="row flex-row">
	<div class="col-xl-4 col-sm-6">
		<div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>数据选择</h4>
            </div>
            <div class="widget-body">
                <div class="form-group">
                    <label class="form-control-label">日期范围</label>
                    <input type="text" class="form-control" id="daterange" name="daterange">
                </div>
                <div class="form-group">
                    <label class="form-control-label">人员范围</label>
                    <select class="form-control" id="sales" name="sales">
                    	<option value="">全部</option>
                    	{volist name="sales" id="sales"}
                    		<option value="{$sales}">{$sales}</option>
                    	{/volist}
                    </select>
                </div>
                <div class="text-right">
                    <button class="btn btn-gradient-01" onclick="drawChart()">确定</button>
                </div>
            </div>
        </div>
	</div>
	<div class="col-xl-2 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">接待客户</div>
                <div id="visitor_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="visitorChainRatio" style="color:#aea9c3;font-size:1rem">0%</div>
            </div>
        </div>
    </div>
	<div class="col-xl-2 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">邀约客户</div>
                <div id="invite_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="inviteChainRatio" style="color:#aea9c3;font-size:1rem">0%</div>
            </div>
        </div>
    </div>
    <div class="col-xl-2 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">签订订单</div>
                <div id="order_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="orderChainRatio" style="color:#aea9c3;font-size:1rem">0%</div>
            </div>
        </div>
    </div>
    <div class="col-xl-2 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">交付车辆</div>
                <div id="deliver_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="deliverChainRatio" style="color:#aea9c3;font-size:1rem">0%</div>
            </div>
        </div>
    </div>
</div>
<div class="row flex-row">
    <div class="col-xl-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>客户接待趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="visitor_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="visitor_canvas"></canvas>
                </div>
            </div>
            <!-- End Widget Body -->
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-6 col-sm-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>订单趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="order_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="order_canvas"></canvas>
                </div>
            </div>
            <!-- End Widget Body -->
        </div>
    </div>
    <div class="col-xl-6 col-sm-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>交车趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="deliver_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="deliver_canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row flex-row">
    <div class="col-xl-3 col-sm-6">
        <!-- 接待时长占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>接待时长占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="lengthRatio_chart">
                    <canvas id="lengthRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 接待时长占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 关注车型占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>接待车型占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="vehicleRatio_chart">
                    <canvas id="vehicleRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 关注车型占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 联系方式留存占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>联系方式留存占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="contactRatio_chart">
                    <canvas id="contactRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 联系方式留存占比 -->
    </div>
	<div class="col-xl-3 col-sm-6">
        <!-- 首再次客户占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>首再次客户占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="typeRatio_chart">
                    <canvas id="typeRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 联系方式留存占比 -->
    </div>
</div>
<div class="row flex-row">
    <div class="col-xl-3 col-sm-6">
        <!-- 首次到店成交率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>首次接待成交率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="firstToOrderRatio_chart">
                    <canvas id="firstToOrderRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 首次到店成交率 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 再次到店成交率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>再次接待成交率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="lastToOrderRatio_chart">
                    <canvas id="lastToOrderRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 再次到店成交率 -->
    </div>
    <div class="col-xl-3 col-sm-6">
    	<!-- 客户性别占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>客户性别占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="sexRatio_chart">
                    <canvas id="sexRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 客户性别占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
    	<!-- 承保率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>承保率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="insurance_chart">
                    <canvas id="insurance_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 承保率 -->
    </div>
</div>
{/block}

//自定义Modal
{block name="Modal"}
{/block}
